<template>
  <div>
    <div class="Hz-title">{{ dataItem.name }}频率</div>
    <div class="ruler-item">
      <div>优化前</div> <div class="ruler"><em :style="{left:dataItem&&dataItem.frequency_before?dataItem.frequency_before / 70 * 100 -1 + '%':'0',bottom:0}">{{ dataItem&&dataItem.frequency_before&&isNumber(dataItem.frequency_before)?dataItem.frequency_before.toFixed(0):'0' }}</em><span :style="{left:dataItem&&dataItem.frequency_before?dataItem.frequency_before / 70 * 100 + '%':'0'}" /><em style="left:0%;bottom:-5px;">0</em><em style="left:96%;bottom:-5px;">70</em></div>
    </div>
    <div class="ruler-item">
      <div class="hide">优化前</div>
      <div class="ruler-hide">
        <svg :style="{left:svgLeftValue,width:svgWidthValue}" class="animation-line" width="30px" height="10px"><rect x="0" y="10" width="100%" height="5" fill="#00f4ff"><animate attributeName="width" from="0" to="100%" dur="6s" calcMode="spline" keyTimes="0;1" keySplines=".42,0,.58,1" repeatCount="indefinite" /></rect><rect x="28.5239" y="2.5" width="1" height="0" fill="#fff"><animate attributeName="x" from="0" to="30" dur="6s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" repeatCount="indefinite" /></rect></svg>
      </div>
    </div>
    <div class="ruler-item"><div>优化后</div>
      <div class="ruler">
        <span :style="{left:dataItem&&dataItem.frequency_after?dataItem.frequency_after / 70 * 100 + '%':'0'}" /><em :style="{left:dataItem&&dataItem.frequency_after?dataItem.frequency_after / 70 * 100 -1 + '%':'0',bottom:0}">{{ dataItem&&dataItem.frequency_after&&isNumber(dataItem.frequency_after)?dataItem.frequency_after.toFixed(0):'0' }}</em><em style="left:0%;bottom:-5px;">0</em><em style="left:96%;bottom:-5px;">70</em>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HzCompare',
  props: {
    dataItem: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    svgLeftValue() {
      return this.dataItem && this.isNumber(this.dataItem.frequency_before) && this.isNumber(this.dataItem.frequency_after) ? ((this.dataItem.frequency_after < this.dataItem.frequency_before ? this.dataItem.frequency_after / 70 * 100 : this.dataItem.frequency_before / 70 * 100) + '%') : '0'
    },
    svgWidthValue() {
      return this.dataItem && this.isNumber(this.dataItem.frequency_before) && this.isNumber(this.dataItem.frequency_after) ? Math.abs(this.dataItem.frequency_before - this.dataItem.frequency_after) / 70 * 100 + '%' : '0'
    }
  },
  methods: {
    isNumber(val) {
      if (typeof (val) !== 'number') {
        return false
      } else {
        var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
        if (regPos.test(val) || regNeg.test(val)) {
          return true
        } else {
          return false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Hz-title{
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.ruler-item{
  height: 3rem;
  line-height: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.ruler{
  display: inline-block;
  position: relative;
  height: 3rem;
  flex: 1;
  background: url('~@assets/report/ruler.svg') no-repeat 0 0.5rem;
  background-size: 100% auto;
  margin: 0 0.5rem;
}
.ruler-hide{
  display: inline-block;
  position: relative;
  height: 3rem;
  flex: 1;
  margin: 0 0.5rem;
}
.animation-line{
  // width:10%;
  height:100%;
  position:absolute;
  // left:50%;
  border-left: 1px dashed #44aaaa;
  border-right: 1px dashed #44aaaa;
}
.ruler span{
  display: inline-block;
  width: 2px;
  height: 5px;
  background: #00f4ff;
  position: absolute;
  top: 18%;
}
.ruler em{
  display: inline-block;
  position: absolute;
  bottom: 0;
  font-style: normal;
}
.hide{
  visibility: hidden;
}
</style>
